<template>
  <div id="app">
    <z-button @click="showDialog">dialog</z-button>
    <z-dialog width="30%" top="200px" :visible.sync="visible">
      <template v-slot:title>
        <h3>
          我是标题
        </h3>
      </template>
      <template v-slot:body>
        <!-- <p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</p> -->
        <ul>
          <li>测试1</li>
          <li>测试1</li>
          <li>测试1</li>
        </ul>
      </template>
      <template v-slot:footer>
        <z-button @click="visible = false">取消</z-button>
        <z-button type="primary" @click="visible = false">确定</z-button>
      </template>
    </z-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      visible: false
    }
  },
  methods: {
    fn (e) {
      console.log(e)
    },
    showDialog () {
      this.visible = true
    }
  }
}
</script>

<style lang="scss">
.z-button + .z-button {
  margin-left: 10px;
}
.row {
  margin-bottom: 10px;
}
</style>
